<script setup lang="ts">
  // 导入ref
  import { ref } from 'vue'
  // 导入类型声明文件
  import type { BannerItem, categoryPaanelItem, HotPanelItem } from '@/types/home'

  // 导入轮播图数据API、导入分类数据API、导入热门推荐API
  import { getHomeBannerAPI, getCategoryPanelAPI, getHotPanelAPI } from '@/services/home'
  // 调用封装好的组合式函数
  import { useXtxGuessFunction } from '@/composables/index'

  // 导入导航栏
  import CustomNavbar from './components/CustomNavbar.vue'
  // 导入轮播图
  import XtxSwiper from '@/components/XtxSwiper.vue'
  // 导入分类组件
  import CategoryPanel from './components/CategoryPanel'
  // 导入热门推荐组件
  import HotPanel from './components/HotPanel'
  // 导入猜你喜欢组件
  import XtxGuess from '@/components/XtxGuess'
  // 导入骨架屏--由微信开发者工具生成
  import PageSkeletion from './components/PageSkeletion.vue'



  // 轮播图数据
  const bannerList = ref<BannerItem[]>([])
  // 获取轮播图数据函数
  const getHomeBanner = async () => {
    const res = await getHomeBannerAPI()
    bannerList.value = res.result
  }

  // 分类数据
  const categoryPanelData = ref<categoryPaanelItem[]>([])
  // 获取分类数据函数
  const getCategoryPanel = async () => {
    const res = await getCategoryPanelAPI()
    categoryPanelData.value = res.result
  }

  // 热门推荐数据
  const HotPanelData = ref<HotPanelItem[]>([])
  const getHotPanel = async () => {
    const res = await getHotPanelAPI()
    HotPanelData.value = res.result
  }

  const { guessRef, onScrollToLower } = useXtxGuessFunction()

  // 下拉是否触发
  const ifTriggered = ref(false)
  // 监听下拉刷新
  const onRefresher = async () => {
    ifTriggered.value = true
    // 重置猜你喜欢列表
    guessRef.value?.xtxGuessDataReset()
    // 更新猜你喜欢列表
    guessRef.value?.getXtxGuessMore()
    // 加载轮播图函数
    getHomeBanner()
    // 加载分类函数
    getCategoryPanel()
    // 加载热门推荐函数
    await getHotPanel()
    ifTriggered.value = false
  }

  // 骨架屏显示
  const isLoading = ref(true)
  // 页面加载
  onLoad: {
    isLoading.value = true
    // 加载轮播图函数
    getHomeBanner()
    // 加载分类函数
    getCategoryPanel()
    // 加载热门推荐函数
    getHotPanel()
    isLoading.value = false
  }
</script>

<template>
  <!-- 导航栏 -->
  <CustomNavbar></CustomNavbar>
  <!-- 滚动容器 -->
  <scroll-view refresher-enabled="true" :refresher-triggered="ifTriggered" @refresherrefresh="onRefresher"
    @scrolltolower="onScrollToLower" lower-threshold=10 scroll-y class="scroll-view">
    <!-- 骨架屏 -->
    <PageSkeletion v-if="isLoading"></PageSkeletion>
    <template v-else>
      <!-- 轮播图 -->
      <XtxSwiper :list="bannerList"></XtxSwiper>
      <!-- 分类面板 -->
      <CategoryPanel :list="categoryPanelData"></CategoryPanel>
      <!-- 热门 -->
      <HotPanel :list="HotPanelData"></HotPanel>
      <!-- 猜你喜欢 -->
      <XtxGuess ref="guessRef"></XtxGuess>
    </template>
  </scroll-view>
</template>

<style lang="scss">
  page {
    background-color: #F7F7F7;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  .scroll-view {
    flex: 1;
  }
</style>
